import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import { Steps, Button, Input, DatePicker, Space, Radio } from 'antd';
import style from './style.module.css'
import Pictures from '../../../components/Upload/index'
import axios from 'axios'

//日期
const { RangePicker } = DatePicker;
//步骤条
const { Step } = Steps;
const steps = [
    {
        title: '选择砍价商品',
        content: 'First-content',
    },
    {
        title: '填写基础信息',
        content: 'Second-content',
    },
];
const AddBargain = (props) => {
    //定义
    const [name1, setname] = useState("")  //名称
    const [title1, settitle] = useState("")  //简介
    const [time1, settime] = useState("")  //时间 
    // console.log(time1[1],'66');
    const [value, setValue] = React.useState(1);//状态选择
    const state1 = e => {
        // console.log('radio checked', e.target.value);
        console.log(e.target.value, "e123");
        setValue(e.target.value);
    };
    //步骤条
    const [current, setCurrent] = React.useState(0);
    //下一步按钮
    const next = () => {
        setCurrent(current + 1);
    };
    //提交按钮
    const sure = () => {
        setCurrent(current - 1);
        axios({
            url: '/api/bargainAdd',
            method: 'post',
            data: {
                name: name1,
                title: title1,
                img: "https://img0.baidu.com/it/u=1312646863,1060383131&fm=26&fmt=auto",
                status: value,
                flag: "open",
                state: "进行中",
                date: time1[1]
            }
        }).then(res => {
            // console.log(res, '123');
            //跳转页面
            props.history.push("/layout/bargainGoods")
        })
    };
    //图片的上传
    const [img, setImg] = useState({})
    const handleImg = (e) => {
        console.log(e.response, '12');
        setImg(e.response)
    }
    function onChangeTime(value, dateString) {
        console.log('Formatted Selected Time: ', dateString);
        settime(dateString)
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }
    return (
        <div className={style.addBargain}>
            {/* 步骤条 */}
            <Steps current={current}>
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>
            <div className={style.stepscontent}>
                <ul>
                    <li><span>商品轮播图:<Pictures content={handleImg} /></span></li>
                    <li><span>砍价活动名称:</span><Input placeholder="Basic usage" value={name1} onChange={(e) => {
                        setname(e.target.value)
                    }} /></li>
                    <li><span>砍价活动简介:</span><Input placeholder="Basic usage" value={title1} onChange={(e) => {
                        settitle(e.target.value)
                    }} /></li>
                    <li>
                        <span>活动日期:</span>
                        <Space direction="vertical" size={12}>
                            <RangePicker
                                showTime={{ format: 'HH:mm' }}
                                format="YYYY-MM-DD HH:mm"
                                onChange={onChangeTime}
                                onOk={onOk}
                            />
                        </Space>,
                    </li>
                    <li>
                        <span>活动状态:</span>
                        <Radio.Group onChange={state1} value={value}>
                            <Radio value={1}>开启</Radio>
                            <Radio value={0}>关闭</Radio>
                        </Radio.Group>
                    </li>
                </ul>
            </div>
            <div className="steps-action">
                {current < steps.length - 1 && (
                    <Button type="primary" onClick={() => next()}>
                        下一步
                    </Button>
                )}
                {current === steps.length - 1 && (
                    <Button type="primary" onClick={() => sure()}>
                        提交
                    </Button>
                )}
            </div>
        </div>
    );
}
export default connect((state) => {
    return {
    }
})(AddBargain);
